<template>
	<div class="view">
		<Table highlight-row border stripe 
			:loading="data.loading" 
			:columns="columns" 
			:data="data.data">
		</Table>
	</div>
</template>

<script>
	import CHeadIcon from '@/components/CHeadIcon.vue';
	
	export default {
		props: ['data'],
		components: {
			CHeadIcon
		},
		data() {
			return {
				columns: [{
					type: 'index',
					width: 60,
					fixed: 'left',
					align: 'center'
				}, {
					title: '姓名',
					key: 'name',
					align: 'center',
					width: 100,
					fixed: 'left'
				}, {
					title: '头像',
					key: 'icon',
					width: 90,
					align: 'center',
					fixed: 'left',
					render: (h, params) => {
						var item = params.row;
						return h('div', {
								style : {
									padding: '10px 0px'
								}
						}, [
							h(CHeadIcon, {
								props: {
									data: {
										icon : item.icon,
										letter : item.letter,
										wh : 50,
										radius : true
									}
								}
							})
						]);
					}
				}, {
					title: '身份',
					key: 'type',
					width: 100,
					align: 'center',
					fixed: 'left',
					render: (h, params) => {
						var type = params.row.type;
						if(type == 0) {
							return '普通';
						} else if(type == 1) {
							return '官方用户';
						} else if(type == 2) {
							return '二级用户';
						}
					}
				}, {
					title: '手机号',
					key: 'phoneNum',
					align: 'center',
					width: 120,
					render: (h, params) => {
						var phoneNum = params.row.phoneNum;
						return phoneNum;
					}
				}, {
					align: 'center',
					title: '邮箱',
					key: 'email',
					width: 150
				}, {
					title: '曾用名',
					key: 'useNames',
					align: 'center',
					width: 100,
					render: (h, params) => {
						var useNames = params.row.useNames;
						if(useNames != null && useNames != '') {
							var useNameArr = eval('(' + useNames + ')');
							return useNameArr.join("、");
						}
						return '无';
					}
				}, {
					title: '入行时间',
					key: 'workYear',
					width: 100
				}, {
					title: '性别',
					key: 'gender',
					align: 'center',
					width: 70,
					render: (h, params) => {
						var gender = params.row.gender;
						if(gender == 0) {
							return "未知";
						} else if(gender == 1) {
							return "男";
						} else if(gender == 2) {
							return "女";
						}
					}
				}, {
					title: '年龄',
					align: 'center',
					key: 'age',
					width: 80
				}, {
					title: '出生日期',
					align: 'center',
					key: 'birthday',
					width: 100
				}, {
					title: '身高',
					key: 'height',
					align: 'center',
					width: 80,
					render: (h, params) => {
						var height = params.row.height;
						if(height > 0) {
							return params.row.height + "cm";
						}
						return '未填写';
					}
				}, {
					title: '体重',
					key: 'weight',
					align: 'center',
					width: 80,
					render: (h, params) => {
						var height = params.row.height;
						if(height > 0) {
							return params.row.weight + "cm";
						}
						return '未填写';
					}
				}, {
					title: '民族',
					key: 'nation',
					align: 'center',
					width: 80
				}, {
					title: '常住地',
					key: 'permanentArea',
					align: 'center',
					width: 150,
					render: (h, params) => {
						var permanentArea = params.row.permanentArea;
						if(permanentArea != null && permanentArea != '') {
							var permanentAreaArr = eval('(' + permanentArea + ')');
							return permanentAreaArr.join(" ");
						}
						return '无';
					}
				}, {
					title: '状态',
					key: 'status',
					width: 70,
					fixed: 'right',
					render: (h, params) => {
						var status = params.row.status;
						return status == 1 ? "正常" : "禁用";
					}
				}, {
					title: '操作',
					key: 'action',
					fixed: 'right',
					align: 'center',
					width: 80,
					render: (h, params) => {
						return h('div', [
							h('Button', {
								props: {
									type: 'text',
									size: 'small'
								},
								on: {
									click: () => {
										$this.toUserSpacePage(params.row.uid)
									}
								}
							}, '详情')
						]);
					}
				}]
			}
		},
		methods: {
		}
	}
</script>

<style scoped="scoped">

</style>